<template>
  <div class="widget_settings_pro">
    <ele-form-section
        v-model="formData"
        :request-fn="handleSubmit"
        :sections="sections"
        @request-success="handleSuccess"
    >
      <template v-slot:blocks="{ desc, data, field, formData }">
        <el-collapse v-model="activeNames">
          <draggable v-model="formData.templateBlockList" chosenClass="active" animation="500">
            <template v-for="(item, index) in formData.templateBlockList">
              <el-collapse-item title="系列" :name="index" class="game-select editForm" :key="index">
                <template slot="title">
                  <div class="custom-title">
                    <svg-icon icon-class="grid" class="icon"></svg-icon>
                  </div>
                  <span>系列</span>
                </template>
                <div class="editForm">
                  <el-form-item label="PC图片：" prop="icon" class="no-border pic"  v-if="item.settings.collection && item.settings.collection.id">
                    <ele-form-upload-plus-file  v-model="item.settings.collection.icon" title="图片"/>
                  </el-form-item>
                  <el-form-item label="移动端图片：" prop="icon" class="no-border pic"  v-if="item.settings.collection && item.settings.collection.id">
                    <ele-form-upload-plus-file  v-model="item.settings.collection.mobileIcon" title="移动端图片"/>
                  </el-form-item>
                  <div class="form-item inline">
                    <div class="product-select" v-if="item.settings.collection && item.settings.collection.id">
                      <div class="selected">
                        <span class="value">{{ item.settings.collection.name }}</span>
                        <div class="icons">
                          <i class="el-icon-sort" @click="handleOpen(index, item)"></i>
                          <i class="icon_custom el-icon-delete" @click="delProduct(index)"></i>
                        </div>
                      </div>
                      <div class="select-bt">
                        <router-link :to="{name: 'series-list'}" tag="a" class="link">管理系列</router-link>
                      </div>
                    </div>
                    <el-button v-else type="primary" size="small" @click="handleOpen(index)"
                               style="width: 90%;margin: auto;display: block">添加系列
                    </el-button>
                  </div>
                  <el-form-item label="系列自定义标题：" prop="icon" class="no-border pic"  v-if="item.settings.collection && item.settings.collection.id">
                    <el-input  v-model="item.settings.collection.customName" title="图片"/>
                  </el-form-item>
                  <el-form-item label="系列自定义副标题：" prop="icon" class="no-border pic"  v-if="item.settings.collection && item.settings.collection.id">
                    <ele-form-quill-edit v-model="item.settings.collection.customSubName"
                                  ref="myQuillEditor"
                    ></ele-form-quill-edit>
                  </el-form-item>
                </div>
                <div class="form-item">
                  <el-button v-if="formData.templateBlockList.length > 1" class="addBtn" @click="handleRemove(index)"><i
                      class="el-icon-remove"></i>删除内容
                  </el-button>
                </div>
              </el-collapse-item>
            </template>
          </draggable>
        </el-collapse>
        <el-button type="primary" size="small" class="addBtn" @click="addPic"><i class="el-icon-plus"></i>添加系列
        </el-button>
      </template>
      <template v-slot:form-btn="{ btns }">
        <div class="rest-btn" @click="reset">
          <svg-icon icon-class="reset-settings"></svg-icon>
          重置配置
        </div>
      </template>
    </ele-form-section>
    <series-dialog ref="seriesDialog" :productId="productId" :productDialogVisible="isOpen" @save="getSelectData" @close="isOpen = false" :currentObj="currentObj"></series-dialog>
  </div>
</template>

<script>
import draggable from 'vuedraggable';
import seriesDialog from '_c/Dialog/series_dialog';
import {debounce, deepClone} from '@/utils/utils';

const predefineColors = [
    '#ff4500',
    '#ff8c00',
    '#ffd700',
    '#90ee90',
    '#00ced1',
    '#1e90ff',
    '#c71585',
    'rgba(255, 69, 0, 0.68)',
    'rgb(255, 120, 0)',
    'hsv(51, 100, 98)',
    'hsva(120, 40, 94, 0.5)',
    'hsl(181, 100%, 37%)',
    'hsla(209, 100%, 56%, 0.73)'
];

export default {
    name: 'collectionListForm',
    components: {draggable, seriesDialog},
    props: {
        value: {
            type: Object,
            default: () => ({})
        }
    },
    watch: {
        value: {
            handler (newVal, oldVal) {
                const val = JSON.parse(newVal.styleJson);
                if (!val.image_size) {
                    val.image_size = 'origin';
                }
                this.formData = val;
            },
            immediate: false,
            deep: true
        },
        formData: {
            handler (newVal, oldVal) {
                this.pageCount++;
                if (this.pageCount !== 1) {
                    this.setData();
                }
            },
            immediate: false,
            deep: true
        }
    },
    data () {
        return {
            currentRow: 0,
            currentObj: {},
            productId: null,
            isOpen: false,
            formData: this.value ? JSON.parse(this.value.styleJson) : {},
            pageCount: 1,
            activeNames: [],
            sections: [
                {
                    title: '设置',
                    formDesc: {
                        name: {
                            type: 'input',
                            label: '标题'
                        },
                        sub_name: {
                            type: 'ele-form-quill-edit',
                            label: '副标题'
                        },
                        grid: {
                            type: 'slider',
                            label: () => { return `PC每排系列数  ${this.formData.grid}`; },
                            attrs: {
                                min: 2,
                                max: 6
                            }
                        },
                        'collection_title_color': {
                            type: 'color',
                            label: '系列名称颜色',
                            break: true,
                            attrs: {
                                'show-alpha': true,
                                predefine: predefineColors
                            }
                        },
                        'image_size': {
                            type: 'select',
                            label: '图片高度',
                            options: [
                                {text: '保留原尺寸', value: 'origin'},
                                {text: '大', value: 'large'},
                                {text: '中', value: 'medium'},
                                {text: '小', value: 'small'}
                            ]
                        },
                        'enable_auto_change': {
                            type: 'switch',
                            break: true,
                            label: '自动切换商品'
                        },
                        'change_every': {
                            type: 'slider',
                            label: () => { return `自动切换时间 ${this.formData.change_every}s`; },
                            attrs: {
                                min: 1,
                                max: 10
                            }
                        },
                        'no_padding': {
                            type: 'switch',
                            break: true,
                            label: '紧凑模式'
                        },
                        'is_circle': {
                            type: 'switch',
                            break: true,
                            label: '圆形图片'
                        }

                    }
                },
                {
                    title: '添加系列',
                    formDesc: {
                        blocks: {}
                    }
                },
                {
                    title: '间距留白',
                    formDesc: {
                        'module_layout': {
                            type: 'ele-spacing'
                        }
                    }
                }
            ]
        };
    },
    methods: {
        addPic () {
            this.currentObj = {};
            this.formData.templateBlockList.push({
                alignment: 'center',
                banner_height: 'medium',
                image_src: '',
                link_to_url: '',
                name: 'Collection',
                settings: {
                    collection: {}
                },
                type: 'collection'
            });
        },
        handleResponse (response, file, fileList) {
            return response;
        },
        handleSubmit (data) {
            return Promise.resolve();
        },
        handleSuccess () {
            this.$message.success('创建成功');
        },
        reset () {
            this.pageCount = 0;
            if (!('module_layout' in this.value)) {
                this.$set(this.value, 'module_layout', {
                    left: 0,
                    top: 0,
                    right: 0,
                    bottom: 0
                });
            }
            this.$emit('resetData', this.value);
        },
        handleOpen (index, item) {
            if (item) {
                this.productId = item.settings.collection.id;
                this.$refs.seriesDialog.handleTableList();
            }
            this.currentRow = index;
            this.isOpen = true;
        },
        handleRemove (index, record) {
            this.formData.templateBlockList.splice(index, 1);
        },
        getSelectData (data) {
            this.formData.templateBlockList[this.currentRow].settings.collection = data;
        },
        delProduct (index) {
            this.formData.templateBlockList[index].settings.collection = null;
        },
        setData: debounce(function () {
            let data = deepClone(this.value);
            data.styleJson = JSON.stringify(this.formData);
            this.$store.commit('SET_PROJECT_DATA', data);
        }, 600)
    },
    mounted () {
        if (!('no_padding' in this.formData)) {
            this.$set(this.formData, 'no_padding', false);
        }
        if (!('is_circle' in this.formData)) {
            this.$set(this.formData, 'is_circle', false);
        }
        if (!('enable_auto_change' in this.formData)) {
            this.$set(this.formData, 'enable_auto_change', false);
        }
        if (!('change_every' in this.formData)) {
            this.$set(this.formData, 'change_every', 5);
        }
        if (!('module_layout' in this.formData)) {
            this.$set(this.formData, 'module_layout', {
                left: 0,
                top: 0,
                right: 0,
                bottom: 0
            });
        }
        const d = this.formData.templateBlockList;
        d.forEach(s => {
            if (!s.settings.collection.customName && s.settings.collection.id) {
                this.$set(s.settings.collection, 'customName', s.settings.collection.name);
            }
            if (!s.settings.collection.customSubName) {
                this.$set(s.settings.collection, 'customSubName', '');
            }
        });
    }
};
</script>

<style scoped lang="scss">
.form-item-inline {
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 10px;
  padding-right: 10px;
  color: #606266;
  height: 32px;
  margin-bottom: 10px;
}

.editForm {
  margin-bottom: 10px;

  .form-item {
    margin-top: 10px;

    label {
      display: block;
      height: 32px;
      line-height: 32px;
    }

    &.inline {
      .selected {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .icon {
          i:first-child {
            margin-right: 10px;
          }
        }
      }
    }
  }

  ::v-deep .el-collapse-item__content {
    border: 1px solid #d8deec;
    border-top: 0;
    padding-left: 10px;
  }
}

.addBtn {
  width: 100%;
}

.selected {
  width: 260px;
  height: 40px;
  background-color: #eef0f2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 12px;

  .icon {
    i:first-child {
      margin-right: 10px;
    }
  }

  .value, .icons {
    display: flex;
    align-items: center;
  }

  .value {
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    white-space: nowrap;
    width: 160px;

    img {
      margin-right: 12px;
    }
  }

  .icons {
    padding-right: 12px;

    .el-icon-sort {
      margin-right: 12px;
    }
  }
}

.select-bt {
  .link {
    color: #1f7df8;
  }

  .desc {
    color: rgba(0, 0, 0, 0.65);
    line-height: 1;
    margin: 0;
    font-size: 12px;
  }
}

.custom-title {
  display: flex;
  align-items: center;

  .icon, img {
    margin-right: 6px;
  }
}
</style>
